<template>
  <div class="studentManagement">
    <!-- 搜索栏 -->
    <div class="invite-sub">
        <img class="invite-logo" src="../../static/image/icon-title.png" alt="">
        <span class="inviteSearch">
          <input type="text" placeholder="搜索">
          <img src="../../static/image/sousuo.png" alt="">
        </span>
    </div>
    <!-- 搜索栏 end-->
    <div class="pageDetail">
        <div class="titleAll ">
          <div class="public-header">
          <div class="public-header-ch">学员列表</div>
          <div class="public-header-en">STUDENT&nbsp;&nbsp;LIST</div>
          <div class="public-header-line"></div>
        </div>
        <!-- <img src="../../static/image/icon-title.png"> -->
      </div>
    </div>

    <div class="listnames">
      <div>头像</div>
      <div>姓名</div>
      <div>手机</div>
      <div>性别</div>
      <div>年龄</div>
      <div>子公司/部门</div>
      <div>职位</div>
      <div>创建时间</div>
      <div>账号启用状态</div>
      <div class="listnameSelect">
        <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value" :key="option.id ">{{ option.text }}</option>
      </select> 
      </div>            
    </div>

    <div class="info clear">
      <div class="message" v-for="list in lists" :key="list.id">
        <div v-if="list.headPictureUrl == ''"><img src="../../static/image/icon-default-avatar.png"></div>
        <div v-else><img :src="list.headPictureUrl"  ></div>
        <div>{{ list.name }}</div>
        <div>{{ list.mobile }}</div>
        <div>{{ list.gender }}</div>
        <div>{{list.age}}</div>
        <div>{{list.companyName}}</div>
        <div>{{list.position}}</div>
        <div>{{list.createTime}}</div>
        <div>
          <el-switch 
            v-model="list.isDdelete"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="正常"
            inactive-text="禁用"
            :active-value="0"
            :inactive-value="1"
            @change="status(list.id,list.isDdelete)"
            >
          </el-switch>
        </div>
        <div class="report">
          <button><img src="../../static/image/visible.png">成绩报告</button>
        </div>
      </div>
    </div>

    
  <!-- page -->
    <!-- <el-pagination v-show="completedTotal!=0" background layout="prev, pager, next" :total="completedTotal" @current-change="completedCourse"></el-pagination> -->
  <!-- page end-->

  </div>
</template>
<script>

export default{
  data(){
    return{
      selected: '全部',
      options: [
        { text: '全部学员', value: '全部学员' },
        { text: 'MarkSimos学员', value: 'MarkSimos学员' },
        { text: 'ChangeMan学员', value: 'ChangeMan学员' },
      ],
       lists: [ ],

    }
  },
  
  methods:{
    // 获取所有列表 
      getAllData(){
        let companyId = JSON.parse(sessionStorage.getItem('login')).companyId;
        console.log("companyId为：" + companyId)
        let data = {
          companyId:companyId
        }
        //console.log(data)

        this.$http.studentManage(data,(res)=>{
          // let isDdelete = res.data.list.isDdelete
          this.lists = res.data
          console.log(res)
        },(errRes)=>{
          console.log(errRes)
        })
    },
    // 改变开关状态
    status(id,isDdelete){
      if(isDdelete == 1) {
        isDdelete = 0
      } else {
        isDdelete = 1
      }
      let data = {
        id : id,
        status : isDdelete
      }
      console.log(data);

      this.$http.changeStatus(data,(res)=>{
       if(res.errCode == 0){
          this.$message({
          message: res.message,
          type: 'success'
        });
       }else{
         this.$message({
           message: res.message,
           type:'error'
         });
       }
        console.log(res)
      },(errRes)=>{
        console.log(errRes)
      })
    }
    
  },
  mounted(){
    this.getAllData();
  }
}

</script>